<template>
	<z-form :model="userItem"
	        class="zhdisk-user-edit"
	        :rules="rules" ref="userEditForm">

		<template #form-title>
			<div class="flex justify-items-center">
				<router-link to="/admin/user-list">
					<svg-icon class="inline mr-2 cursor-pointer" name="file-type-back"></svg-icon>
				</router-link>
				<span>用户信息</span>
			</div>
		</template>
		<template #form-sub-title>
			请维护您的用户信息，可参考
			<a class="link" target="_blank" href="">ZFile用户信息</a>
		</template>

		<z-form-item label="用户名" prop="username">
			<el-input v-model="userItem.username" :disabled="isEditMode"/>
		</z-form-item>

		<z-form-item label="昵称" prop="nickname">
			<el-input v-model="userItem.nickname"/>
		</z-form-item>

		<z-form-item label="密码" v-if="!isEditMode">
			<el-input
			          placeholder="请输入密码" v-model="userItem.password"/>
		</z-form-item>

		<template #footer>
			<el-button :loading="loading" type="primary" size="default" :icon="CheckBadgeIcon" @click="submitForm">保存设置</el-button>
		</template>
	</z-form>
</template>

<script setup>
import common from "~/common";

import {Link} from '@element-plus/icons-vue'
import {CheckBadgeIcon} from '@heroicons/vue/24/solid'

import region from "~/tool/region"

import ZForm from "/src/components/form/ZForm.vue";
import ZFormItem from "/src/components/form/ZFormItem.vue";

import {
	apiAddSystemUser,
	apiInfoSystemUser,
	apiEditSystemUser
} from "~/api/user";
import {ElMessageBox} from "element-plus";
import { toClipboard } from "@soerenmartius/vue3-clipboard";

const systemConfig = ref();

let router = useRouter();
let route = useRoute();

let userEditForm = ref();
const submitForm = () => {
	if(!isEditMode.value) Reflect.deleteProperty(userItem.value, "id");
	userEditForm.value.validate(checked => {
		if (checked) {
			loading.value = true;
			if (isEditMode.value){
				apiEditSystemUser(userItem.value).then(() => {
					ElMessageBox.confirm('保存成功, 是否返回用户列表？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'success',
						callback: action => {
							if (action === 'confirm') {
								router.push('/admin/user-list');
							}
						}
					});
				}).finally(() => {
					loading.value = false;
				})

			}else{
				apiAddSystemUser(userItem.value).then(() => {
					ElMessageBox.confirm('保存成功, 是否返回用户列表？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'success',
						callback: action => {
							if (action === 'confirm') {
								router.push('/admin/user-list');
							}
						}
					});
				}).finally(() => {
					loading.value = false;
				})
			}
		} else {
			ElMessage.warning('表单验证失败, 请检查表单数据是否填写正确');
			return false;
		}
	})
}

/**
 * 初始化支持的存储源列表和存储源数据
 */
let useInitData = () => {
	// 存储源数据
	let userItem = ref({
		username: '',
		id: '',
		nickname: '',
		password: '',
	});

	let isEditMode = ref(false);
	const loadUserItem = (userId) => {
		apiInfoSystemUser(userId).then((res) => {
			userItem.value = res.data;
		})
	}
	onMounted(() => {
    let userId = route.params.userId;
		if (userId) {
			isEditMode.value = true;
			loadUserItem(userId);
		}
	})

	// loading
	let loading = ref(false);
	// 表单校验规则
	let rules = ref({
		username: [{required: true, message: '请输入用户名'}],
		nickname: [{required: true, message: '请输入昵称'}],
		password:[{required: true, min: 6, message: '密码长度至少为6为', trigger: 'blur'}]
	})

	return { userItem, loading, rules, isEditMode }
}
let { userItem, loading, rules, isEditMode } = useInitData();


</script>

<style scoped>

.el-drive-form-col {
    padding-left: 0 !important;
}

.zhdisk-site-id-input-site-type-select {
    width: 100px;
}

.zhdisk-info-tooltip {
	line-height: 32px;
}

.zhdisk-user-edit >>> .z-form-item-input > .el-select {
	width: 100%;
}

</style>

<route lang="yaml">
meta:
  layout: admin
  name: 新增存储源
</route>
